<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>公共池统计</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--引入layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			  tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

		<script src="/admin/js-css/js/eCharts/echarts.js"></script>

		<style>
			#app {
				padding: 20px;
			}

			.card {
				padding: 20px;
				margin-bottom: 20px;
				box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
			}

			.u-m-l-20 {
				margin-left: 20px;
			}

			.u-m-l-40 {
				margin-left: 40px;
			}

			.top-box {
				display: flex;
				margin-top: 20px;
				align-items: center;
			}

			.top-box .time {
				font-size: 14px;
			}

			.el-row {
				margin-bottom: 20px;
			}

			.el-col {
				border-radius: 4px;
			}

			.grid-content {
				font-size: 14px;
				border-radius: 4px;
				line-height: 36px;
				text-align: center;
				box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
			}

			.grid-content b {
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<!-- 顶部查询框 -->
		<div id="app">


			<el-row :gutter="24">
				<el-col :span="4" v-for="(item,index) in data2">
					<div class="grid-content" @click="openStat(item.mkmc,item.url)" :style="'background:'+item.bgcolor+';margin: 10px 10px;'">
						<div>{{item.mkmc}}</div>
						<b>{{item.c}}</b>
					</div>
				</el-col>

			</el-row>
			<el-row :gutter="24">
				<el-col :span="6">
					<div class="grid-content">
						<div class="title">近7天回访数据统计</div>
						<div id="chartContainer" style="width: 100%; height: 400px;"></div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<div class="title">按来院渠道统计</div>
						<div id="chartContainer4" style="width: 100%; height: 400px;"></div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<div class="title">按区域统计-以城市为单为</div>
						<div id="chartContainer2" style="width: 100%; height: 400px;"></div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<div class="title">按诊断病种统计</div>
						<div id="chartContainer3" style="width: 100%; height: 400px;"></div>
					</div>
				</el-col>
			</el-row>

		</div>



		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						data1:{mapyy:{},mapks:{}},
						data2:[],
						value: '',
						value1: '',
						circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
					}
				},
				async mounted() {
					await this.getdata2();
					this.initChart();
				},
				methods: {
					openStat(title,url){
						top.f_layer_open_get(url, "90%", "80%", function () {

						}, {}, title);
					},
					async querydataStat(){
						this.getdata2();
						this.initChart();
					},
					async getdata2(){
						const res = await postWebCustom(getTableId("3302"),{});
						this.data2 = res.data;
					},
					async getdata1(){
						const res = await postWebCustom(getTableId("3282"),{});
						this.data1 = res.data;
						this.value = this.data1.mapks.id;
						this.value1 = [this.data1.start,this.data1.end];
						if(this.data1.mapyy.logo != undefined && this.data1.mapyy.logo!=''){
							this.circleUrl = this.data1.mapyy.logo;
						}

						this.getdata2();
					},
					async initChart() {
						// 获取图表容器元素
						const chartContainer = document.getElementById('chartContainer');
						const chartContainer2 = document.getElementById('chartContainer2');
						const chartContainer3 = document.getElementById('chartContainer3');
						const chartContainer4 = document.getElementById('chartContainer4');

						// 创建Echarts实例
						const chart = echarts.init(chartContainer);
						const chart2 = echarts.init(chartContainer2);
						const chart3 = echarts.init(chartContainer3);
						const chart4 = echarts.init(chartContainer4);


						const res4 = await postWebCustom(getTableId("3307"),{});
						const option4 = {
							tooltip: {
								trigger: 'item'
							},
							legend: {
								top: '5%',
								left: 'center'
							},
							series: [{
								name: '来院渠道',
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								itemStyle: {
									borderRadius: 10,
									borderColor: '#fff',
									borderWidth: 2
								},
								label: {
									show: false,
									position: 'center'
								},
								emphasis: {
									label: {
										show: true,
										fontSize: 40,
										fontWeight: 'bold'
									}
								},
								labelLine: {
									show: false
								},
								data: res4.data
							}]
						};

						const res2 = await postWebCustom(getTableId("3306"),{});
						const option2 = {
							tooltip: {
								trigger: 'item'
							},
							legend: {
								top: '5%',
								left: 'center'
							},
							series: [{
								name: '城市',
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								itemStyle: {
									borderRadius: 10,
									borderColor: '#fff',
									borderWidth: 2
								},
								label: {
									show: false,
									position: 'center'
								},
								emphasis: {
									label: {
										show: true,
										fontSize: 40,
										fontWeight: 'bold'
									}
								},
								labelLine: {
									show: false
								},
								data: res2.data
							}]
						};

						const res3 = await postWebCustom(getTableId("3308"),{});
						// 调用配置函数设置图表选项
						const option3 = {
							tooltip: {
								trigger: 'item',
								formatter: '{a} <br/>{b}: {c} ({d}%)'
							},

							series: [
								{
									name: '按诊断病种统计',
									type: 'pie',
									radius: ['50%', '70%'],
									avoidLabelOverlap: false,
									label: {
										show: false,
										position: 'center'
									},
									emphasis: {
										label: {
											show: true,
											fontSize: '30',
											fontWeight: 'bold'
										}
									},
									labelLine: {
										show: false
									},
									data: res3.data
								}
							]
						};


						const res1 = await postWebCustom(getTableId("3288"),{ssks:""+this.value});
						const option = {
							xAxis: {
								type: 'category',
								data: res1.data.x
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								data: res1.data.y,
								type: 'bar'
							}]
						};

						// 使用配置项显示图表
						chart.setOption(option);
						chart2.setOption(option2);
						chart3.setOption(option3);
						chart4.setOption(option4);

					}
				}
			})
		</script>
	</body>
</html>